/*
 * @Author: your name
 * @Date: 2021-12-20 00:40:29
 * @LastEditTime: 2021-12-20 01:40:21
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\50htmljs\progress\script.js
 */
const progress = document.getElementById('progress')
const prev = document.getElementById('prev')
const next  =  document.getElementById('next')
const circles = document.querySelectorAll('.circle')

let currentActive = 1

next.addEventListener('click',()=>{
    currentActive++
    // if (currentActive > circles.length) {
    //     currentActive = circles.length
    // }
    updated()
})

prev.addEventListener('click',()=>{
    currentActive--
    // if (currentActive < 1 ) {
    //     currentActive = 1
    // }
    updated()
})

function updated() {
    circles.forEach((item,index)=>{
        if(index < currentActive){
            item.classList.add('active')
        }else{
            item.classList.remove('active')
        }
    })
    const actives = document.querySelectorAll('.active')

    progress.style.width = (actives.length - 1 )/(circles.length - 1 )*100 +'%'

    if (currentActive === 1 ) {
        prev.disabled = true
    } else if(currentActive === circles.length) {
        next.disabled = true
    } else{
        prev.disabled = false
        next.disabled = false
    }

}

